<template>
	<a-modal
		title="巡检记录"
		:width="800"
		:visible="visible"
		:confirmLoading="confirmLoading"
		@ok="handleSubmit"
		@cancel="handleCancel"
	>
		<a-spin :spinning="confirmLoading">
			<a-form :form="form">
				<a-form-item style="display: none" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
					<a-input v-decorator="['id']" />
				</a-form-item>
				<a-form-item style="display: none" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
					<a-input v-decorator="['gardenHouseClassRoomId']" />
				</a-form-item>
				<a-form-item style="display: none" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
					<a-input v-decorator="['responsiblePerson']" />
				</a-form-item>
				<a-row :gutter="20">
					<a-col :md="12" :sm="24">
						<a-form-item label="风险位置" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
							{{ detailInfo.classRoomName }}
						</a-form-item>
					</a-col>
					<a-col :md="12" :sm="24">
						<a-form-item label="责任人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
							{{ detailInfo.responsiblePersonStr }}
						</a-form-item>
					</a-col>
				</a-row>
        <a-row :gutter="20">
					<a-col :md="12" :sm="24">
						<a-form-item label="风险编号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
							<a-input placeholder="请输入风险编号" v-decorator="['riskNumber', {rules: [{required: true, message: '请输入风险编号！'}]}]" />
						</a-form-item>
					</a-col>
					<a-col :md="12" :sm="24">
						<a-form-item label="风险源名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
							<a-input placeholder="请输入风险源名称" v-decorator="['riskSourceName', {rules: [{required: true, message: '请输入风险源名称！'}]}]" />
						</a-form-item>
					</a-col>
				</a-row>
        <a-row :gutter="20">
					<a-col :md="12" :sm="24">
						<a-form-item label="风险类别" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
							<a-input placeholder="请输入风险类别" v-decorator="['riskCategory', {rules: [{required: true, message: '请输入风险类别！'}]}]" />
						</a-form-item>
					</a-col>
					<a-col :md="12" :sm="24">
						<a-form-item label="风险等级" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
							{{ form.riskLevelStr }}
							<a-select
								showSearch 
								optionFilterProp="children"  allowClear v-decorator="['riskLevel', {rules: [{required: false, message: '请选择风险等级！'}]}]">
								<a-select-option v-for="item in riskLevelList" :key="item.val" :value="item.val">{{item.text}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
        <a-row :gutter="20">
					<a-col :md="24" :sm="24">
						<a-form-item label="风险因素" :labelCol="{ xs: { span: 24 }, sm: { span: 3 }, }" :wrapperCol="{xs: { span: 24 }, sm: { span: 21 },}" has-feedback>
							
							<a-input placeholder="请输入风险因素" v-decorator="['riskFactors', {rules: [{required: true, message: '请输入风险因素！'}]}]" />
						</a-form-item>
					</a-col>
				</a-row>
        
						<a-form-item label="可能导致的事故及后果" :labelCol="{ xs: { span: 24 }, sm: { span: 24 },}" labelAlign="left" :wrapperCol="{xs: { span: 24 }, sm: { span: 24 },}" has-feedback>
							<a-textarea
								v-decorator="['possibleAccidents', {rules: [{required: true, message: '可能导致的事故及后果'}]}]"
								class="dongtai-textarea"
								placeholder="请填写描述"
								:autoSize="{minRows: 2, maxRows: 5}"
							/>
						</a-form-item>

				<a-form-item label="风险现场图片：" :labelCol="{ xs: { span: 24 }, sm: { span: 24 },}" labelAlign="left" :wrapperCol="{xs: { span: 24 }, sm: { span: 24 },}" has-feedback>
					<div class="clearfix">
						<div v-if="ImageList.length">
							<div class="img-border-div" v-for="(item, index) in ImageList" :key="index">
								<img class="u-img" :src="item.src" alt="img" />
								<div class="img-b-div">
									<a-icon class="eye-a" type="eye" @click="handlePreview(item)" />
									<a-icon class="delete-a" type="delete" @click="deleteImg(item, index)" />
								</div>
							</div>
						<a-upload
							name="avatar"
							list-type="picture-card"
							class="avatar-uploader"
							:show-upload-list="false"
							:before-upload="beforeUpload"
						>
							<div v-if="ImageList.length < 9">
								<a-icon type="plus" />
								<div class="ant-upload-text">Upload</div>
							</div>
						</a-upload>
						<a-modal :visible="previewVisible" :footer="null" @cancel="handlePreviewCancel">
							<img alt="example" style="width: 100%" :src="previewImage" />
						</a-modal>
						</div>
					</div>
				</a-form-item>

				<a-form-item
					label="管控依据："
					:labelCol="{ xs: { span: 24 }, sm: { span: 24 },}" labelAlign="left" :wrapperCol="{xs: { span: 24 }, sm: { span: 24 },}"
					has-feedback
					>
					<a-textarea
								v-decorator="['controlBasis', {rules: [{required: true, message: '管控依据'}]}]"
								class="dongtai-textarea"
								placeholder="请填写管控依据"
								:autoSize="{minRows: 2, maxRows: 5}"
							/>
				</a-form-item>
			</a-form>
		</a-spin>
	</a-modal>
</template>

<script>
import { classAlbumEdit } from '@/api/modular/garden/classalbum'
import { getMyAuthClassList } from '@/api/modular/garden/classDynamicApi'
import { getRoster } from '@/api/modular/garden/classManage'
import { xunjianDetail, xunjianEdit} from '@/api/modular/garden/xunjian'
import moment from 'moment'

export default {
	props: {},
	data() {
		return {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 6 },
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 18 },
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			detailInfo: {},
			previewVisible: false,
			previewImage: '',
			ImageList: [],
			rosterList: [],

			isShowBanjiList: false,
			classList: [],
			imgTitle: '',
			deleteImgId: [],
      		riskLevelList: [
				{val: 1, text: '低风险', },
				{val: 2, text: '一般风险', },
				{val: 3, text: '较高风险', },
				{val: 4, text: '严重风险', },]
		}
	},
	mounted() {
		this.imgTitle = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/previewImg?id='
		// this.getMyAuthClassList()
	},
	methods: {
		getMyAuthClassList() {
			getMyAuthClassList().then((res) => {
				console.log(res.data)
				this.classList = res.data
			})
		},
		// 初始化方法
		edit(record) {
			this.ImageList = []
			this.deleteImgId = []
			this.imgTitle = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/previewImg?id='
			console.log(record)
			this.visible = true
			xunjianDetail({inspectionId: record.id}).then(res => {
				console.log(res)
				if(res.code == 200){
					if (res.data.imageList && res.data.imageList.length) {
						res.data.imageList.forEach((item) => {
							item.src = this.imgTitle + item.id
							this.ImageList.push(item)
						})
						console.log(this.ImageList)
					}
					this.$nextTick(() => {
						this.detailInfo = res.data
						this.form.setFieldsValue({
							id: record.id,
							classRoomName: res.data.classRoomName,
							gardenHouseClassRoomId: res.data.gardenHouseClassRoomId,
							responsiblePerson: res.data.responsiblePerson,
							responsiblePersonStr: res.data.responsiblePersonStr,
							riskNumber: res.data.riskNumber,
							riskSourceName: res.data.riskSourceName,
							riskCategory: res.data.riskCategory,
							riskLevelStr: res.data.riskLevelStr,
							riskLevel: res.data.riskLevel,
							riskFactors: res.data.riskFactors,
							possibleAccidents: res.data.possibleAccidents,
							controlBasis: res.data.controlBasis,
						})
						console.log(this.form)
					})
				}
			})
			
		},
		setChildList(record) {
			getRoster({ pageNo: 1, pageSize: 100, ClassId: record.classId }).then((res) => {
				if (res.code == 200) {
					this.rosterList = res.data.rows
					this.form.setFieldsValue({
						Id: record.id,
						Describe: record.describe,
						duixiang: 2,
					})
					setTimeout(() => {
						this.form.setFieldsValue({
							classId: record.classId,
							childIdList: record.childIdList,
						})
					}, 600)
				}
			})
		},
		classChange(val) {
			console.log('----------', val)
			if (val) {
				getRoster({ pageNo: 1, pageSize: 100, ClassId: val }).then((res) => {
					if (res.code == 200) {
						console.log(res.data.rows)
						this.rosterList = res.data.rows
					}
				})
			} else {
				this.rosterList = []
			}
		},
		async beforeUpload(file, fileList) {
			let src = await this.fileToBase64(file)
			file.src = src
			// this.ImageList = [...this.ImageList, file];
			this.ImageList.push(file)
			// this.ImageList = fileList;
			return false
		},
		fileToBase64(file) {
			return new Promise((resolve, reject) => {
				let reader = new FileReader()
				reader.readAsDataURL(file)
				reader.onload = function (e) {
					resolve(e.target.result)
				}
			})
		},
		handlePreviewCancel() {
			this.previewVisible = false
		},
		async handlePreview(file) {
			if (!file.src && !file.preview) {
				file.preview = await getBase64(file.originFileObj)
			}
			this.previewImage = file.src || file.preview
			this.previewVisible = true
		},

		deleteImg(item, index) {
			if (item.id) {
				this.deleteImgId.push(item.id)
			}
			this.ImageList.splice(index, 1)
		},
		handleChange(val) {
			console.log(val)
			console.log(this.checkTags)
		},
		changeRadio(e) {
			if (e.target.value == 2) {
				this.isShowBanjiList = true
			} else {
				this.isShowBanjiList = false
			}
		},
		handleSubmit() {
			const {
				form: { validateFields },
			} = this
			this.confirmLoading = true
			validateFields((errors, values) => {
				if (!errors) {
					// console.log('values --------------- ',values)
					var _form = new FormData()
					_form.append('id', values.id)
					_form.append('gardenHouseClassRoomId', values.gardenHouseClassRoomId)
					_form.append('responsiblePerson', values.responsiblePerson)
					_form.append('riskCategory', values.riskCategory)
					_form.append('riskFactors', values.riskFactors)
					_form.append('riskLevel', values.riskLevel)
					_form.append('riskNumber', values.riskNumber)
					_form.append('riskSourceName', values.riskSourceName)
					_form.append('possibleAccidents', values.possibleAccidents)
					_form.append('controlBasis', values.controlBasis)
					if(this.deleteImgId.length){
						_form.append('RemoveImageIds', this.deleteImgId)
					}
					

					this.ImageList.forEach((item) => {
						if (!item.id) {
							_form.append('imageList', item)
						}
					})
					xunjianEdit(_form)
						.then((res) => {
							if (res.success) {
								this.$message.success('编辑成功')
								this.visible = false
								this.confirmLoading = false
								this.$emit('ok', values)
								this.form.resetFields()
							} else {
								this.$message.error('编辑失败：' + res.message)
							}
						})
						.finally((res) => {
							this.confirmLoading = false
						})
				} else {
					this.confirmLoading = false
				}
			})
		},
		handleCancel() {
			this.form.resetFields()
			this.visible = false
		},
	},
}
</script>
<style  lang="less" scoped>
.img-b-div {
	display: none;
}
.img-border-div {
	float: left;
	width: 104px;
	height: 104px;
	position: relative;
	margin-right: 8px;
	margin-bottom: 8px;
	border: 1px solid #dddddd;
	&:hover {
		.img-b-div {
			display: block;
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
		}
	}
}
.eye-a {
	position: absolute;
	left: 25px;
	top: 45%;
	color: #ffffff;
	cursor: pointer;
	&:hover {
		font-size: 16px;
	}
}
.delete-a {
	position: absolute;
	left: 60px;
	top: 45%;
	color: #ffffff;
	cursor: pointer;
	&:hover {
		font-size: 16px;
		color: #ff0000;
	}
}
.u-img {
	display: inline-block;
	height: 100%;
	width: 100%;
}
.avatar-uploader{
  float: left;
}
.ant-upload-picture-card-wrapper{
  width: 104px;
}
.ant-form-item{
  margin-bottom: 10px;
}
</style>
